<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>酷炫CSS3_2D效果</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<figure class="effect1">
			<img src="img/pic1.jpg"/>
			<h2>平移动画</h2>
			<p>最简单的平移动画</p>
		</figure>
		<figure class="effect2">
			<img src="img/pic2.jpg"/>
			<h2>平移动画</h2>
			<ul>
				<li>多条图片简介文字</li>
				<li>逐一飞入动画</li>
				<li>利用动画延时达到效果</li>
			</ul>
		</figure>
		<figure class="effect3">
			<img src="img/pic3.jpg"/>
			<h2>底部滑出动画</h2>
			<p>
				translate属性可以制作多种动画，一个简单的位置移动可以制作出多种效果，重要看制作师们能否开动想象力。
			</p>
		</figure>
		<figure class="effect4">
			<img src="img/pic4.jpg"/>
			<div></div>
			<ul>
				<li>info1</li>
				<li>info2</li>
			</ul>
		</figure>
		<figure class="effect5">
			<img src="img/pic5.jpg"/>
			<h2>旋转飞入</h2>
			<p>通过旋转和位移</p>
			<div></div>
		</figure>
		<figure class="effect6">
			<img src="img/pic6.jpg"/>
			<h2>扭曲飞入飞</h2>
			<p>去通过扭曲和位移，制作出飞入的效果。扭曲属到达90度。元素就看不见了</p>
		</figure>
		<figure class="effect7">
			<img src="img/pic7.jpg"/>
			<div></div>
			<h2>缩放</h2>
			<p>缩放缩放缩放缩放缩放</p>
		</figure>
		<figure class="effect8">
			<img src="img/pic8.jpg"/>
			<h2>绘制线条效果</h2>
			<p>通过缩放属性绘制边框线条</p>
			<div id="borderW"></div>
			<div id="borderH"></div>
		</figure>
		<figure class="effect9">
			<img src="img/pic9.jpg"/>
		</figure>
	</body>
</html>
